<template>
<div>
<div id="fans_header">
     <router-link to="/order"><i class="el-icon-shopping-cart-full fans_header_img1" ></i></router-link>
<div id="fans_header_option">
     <div  @click="changecolor" :class="[isActive?'shop':'shopchange']">
             <router-link to="/index/fans/shop" :class="[isActive?'fans_header_font':'fans_header_fontchange']">商城</router-link>
     </div>
     <div @click="changecolor1" :class="[!isActive?'activieschange':'activies ']">
              <router-link to="/index/fans/activities" :class="[!isActive?'fans_header_font':'fans_header_fontchange']">活动</router-link>
     </div>
</div>

<router-link to="/question"><img src="../../assets/mzhpic/fansheader_question.png" alt="" width="20px" height="20px" class="fans_header_img2"></router-link>
</div>  

<div>
   <!-- <router-link to="/search">  <el-button icon="el-icon-search" circle class="search" v-show="searchshow"></el-button></router-link> -->
</div> 

<router-view/>
</div>
  
</template>

<script>

export default {
    data:function () {
        return{
             isActive: true,
             goodsinput:'',
             searchshow:true
             
        }
        
    },
   methods: {
                changecolor: function() {
                    if(this.isActive==true){
                        this.isActive = this.isActive;
                    }else{
                        this.isActive = !this.isActive;
                    }
                    
                },
                 changecolor1: function() {
                    if(this.isActive==true){
                        this.isActive = !this.isActive;
                    }else{
                        this.isActive = this.isActive;
                    }
                    
                    
                  
                }

            }

}
</script>

<style  scoped>

#fans_header{
 
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid rgb(218, 216, 214);
}
 #fans_header_option{
     border: 1px solid rgb(212, 210, 210);
     border-radius: 30px;
     height:40px;
     width: 200px;
     display: flex;
     justify-content: space-around;
     align-content: center;
 }
 .fans_header_img1{
     float: left;
     margin-left: -70px;
     font-size: 50px;
 }
 .fans_header_img2{
     float: right;
       margin-right: -70px
 }
 .shop{
     border-radius: 30px;
     height: 40px;
     width: 100px;
     color:white;
     text-align: center;
    background-color: black;
 }
  .shopchange{
     border-radius: 30px;
     height: 40px;
     width: 100px;
     background-color: white;
     color: black;
     text-align: center;

 }
  .activies{
     border-radius: 30px;
     height: 40px;
     width: 100px; 
      color: black;
      background-color: white;
      text-align: center;
 }
  .activieschange{
     border-radius: 30px;
     height: 40px;
     width: 100px; 
     background-color: black;
     color: white;
     text-align: center;
 }
 .fans_header_fontchange{
     color: black;
     text-decoration:none;
 }
   
.fans_header_font{
     color: white;
     text-decoration:none;
 }

</style>>

